import React, {useState, useEffect, FC} from 'react';
import {Link, useNavigate} from "react-router-dom";
import "./Err.scss";


const Err404: FC = ({}) => {
    let [time, setTime] = useState<number>(5);
    const navigate = useNavigate()

    useEffect(() => {
        let timer = setInterval(() => {
            if (time <= 0) {
                // 清除定时器
                clearInterval(timer)
                // 跳转到首页
                navigate('/')
            }
            setTime(time--);
        }, 1000)
        // 当组件销毁时，清除定时器
        return () => {
            clearInterval(timer)
        }
    }, []);

    return (
        <div className="err">
            <img src={require("../../assets/404.png")} alt=""/>
            <h1>找不到网页</h1>
            <p className="caption-text">您访问的页面不存在或已被删除！<br/>将在{time}秒后返回主页</p>
            <Link to={'/'} replace>返回主页</Link>
        </div>
    );
}

export default Err404;